<script>
    export let resources = {}; // 接收资源对象
    export let showTitle = true; // 是否显示标题

    // 资源图标映射
    const resourceIcons = {
        wood: '/src/libs/images/resource/wood.png',
        stone: '/src/libs/images/resource/stone.png',
        iron: '/src/libs/images/resource/iron.png',
        gold: '/src/libs/images/resource/gold.png',
        runpoint: '/src/libs/images/resource/runpoint.png',
    };
</script>

    <div class="resource-panel">
        {#if showTitle}
            <div class="panel-title">资源</div>
        {/if}
        <div class="resources-grid">
            {#each Object.entries(resources) as [resource, amount]}
                <div class="resource-item">
                    <img src={resourceIcons[resource]} alt={resource}>
                    <span class="amount">{amount}</span>
                </div>
            {/each}
        </div>
    </div>



<style lang="less">
  .resource-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .panel-title {
      font-weight: bold;
      margin-bottom: 8px;
      font-size: 1.1em;
      color: #333;
    }

    .resources-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      gap: 8px;

      .resource-item {
        display: flex;
        align-items: center;
        gap: 4px;

        img {
          width: 24px;
          height: 24px;
        }

        .amount {
          font-weight: 500;
          color: #444;
        }
      }
    }
  }
</style>